<template>
	<view class="content uni-flex-column" :style="bgStyle">
		<CustomNavBar class="navbar">
			<template v-slot:left>
				<view class="back uni-flex uni-align-center uni-justify-center" @click="goBack"><uni-icons type="left"
						size="20"></uni-icons></view>
			</template>
		</CustomNavBar>

		<view class="center">
			<view class="top-container-content">
				<view class="top-container">
					<view class="photo-box">
						<image
							:src="jobData?.avatar===null||jobData?.avatar===''?`${$ImgBaseUrl}banner.png`:jobData.avatar"
							class="photo" />
						<view class="online">{{jobData?.isOnLine===true?'在线':"离线"}}</view>
					</view>
					<view class="uni-flex-column top">
						<view class="uni-flex icon-box">
							<view class="icon" @click='collectHandle(titleWithDefault)'>
								<image :src="`${$ImgBaseUrl}detail_collect.png`" v-if="!titleWithDefault.contact"
									mode="widthFix" />
								<image :src="`${$ImgBaseUrl}lookforsb-collect-selected.png`"
									v-if="titleWithDefault.contact" mode="widthFix" />
							</view>
							<view class="icon" @click="shareToggle">
								<image :src="`${$ImgBaseUrl}detail_share.png`" />
							</view>
							<view class="icon" @click='goReport(jobData)'>
								<image :src="`${$ImgBaseUrl}detail_report.png`" />
							</view>
						</view>
						<view class="line1">
							<text class="title">{{jobData.name}}</text>
							<text class="text1">{{jobData.sex==="0"?'男':jobData.sex==="1"?'女':'未知'}}</text>
							<text class="text1">{{jobData.age}}岁</text>
						</view>
						<view class="uni-flex line2">
							<text class="text1">可接业务: </text>
							<view class="con" v-if="jobData.services && jobData.services.length > 0">
								<text class="text2" v-for='(item,index) in jobData.services'
									:key='index'>{{item}}</text>
							</view>
							<view class="con" v-else>
								<text class="text2">--</text>
							</view>
						</view>
						<view class="uni-flex line2">
							<text class="text1">擅长服务: </text>
							<view class="con" v-if="jobData.goodServices&&jobData.goodServices.length>0">
								<view v-for="(item, index) in jobData.goodServices" :key="index" class="project">
									{{ item }}
								</view>
							</view>
							<view class="con" v-else>
								<text class="text2">--</text>
							</view>
						</view>
						<view class="uni-flex line2">
							<text class="text1">服务区域: </text>
							<view class="con" v-if="jobData.areas&&jobData.areas.length>0">
								<text class="text2" v-for='(item,index) in jobData.areas' :key='index'>{{item}}</text>
							</view>
							<view class="con" v-else>
								<text class="text2">--</text>
							</view>
						</view>
						<view class="uni-flex uni-align-center line3">
							<view class="one">
								<text class="text1">接单数</text>
								<text class="text2">{{jobData.closeCount}}</text>
							</view>
							<view class="two">
								<text class="text1">好评数</text>
								<text class="text2">{{jobData.positiveReviews}}</text>
							</view>
							<view class="three">
								<text class="text1">综合评价</text>
								<text class="text2">{{jobData.comEvaluation}}</text>
							</view>
						</view>
						<view class="line4" @click="handleToast"> 服务价格参考查询 </view>
					</view>
					<view class="uni-flex uni-justify-between tip-con">
						<view class="uni-flex uni-align-center">
							<image :src="`${$ImgBaseUrl}find_people_detail_realname.png`" mode="widthFix" />
							<text>{{realNameStatus}}</text>
						</view>
						<view class="uni-flex uni-align-center">
							<image :src="`${$ImgBaseUrl}find_people_detail_sign.png`" mode="widthFix" />
							<text>{{signStatus}}</text>
						</view>
						<view class="uni-flex uni-align-center">
							<image :src="`${$ImgBaseUrl}find_people_detail_insurance.png`" mode="widthFix" />
							<text>{{insuranceStatus}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="demand">
				<view class="title uni-flex">
					<image :src="`${$ImgBaseUrl}detail_label.png`" mode="widthFix" />
					<text>服务项目</text>
					<image :src="`${$ImgBaseUrl}detail_label.png`" mode="widthFix" />
				</view>

				<view class="ServiceItemsContent">
					<view class="content-top" v-for="(item,index) in jobData.serviceItems" :key="index">
						<view class="custom-collapse">
							<!-- 标题部分 -->
							<view class="collapse-header" @click="toggleCollapse(index)">
								<view class="ServiceItems-top">
									<view class="title-box">
										<text class='title'>{{item.serviceName}}</text>
										<view class="title-bg"></view>
									</view>
									<view class="rate-box">
										<uni-rate :touchable="false" allow-half :readonly="true" :value="item.score"
											size="18" />
										<text class='rate-text'>{{item.score}}分</text>
										<!-- 添加箭头图标 -->
										<uni-icons :type="isCollapseOpen(index) ? 'down' : 'right'" size="16"
											color="#999"></uni-icons>
									</view>

								</view>
							</view>

							<!-- 内容部分 -->
							<view class="collapse-content" v-if="isCollapseOpen(index)">
								<view class="ServiceItems-top-content">
									<view class="sub-collapse" v-for='(subItem, subIndex) in item.serviceItemsInfo'
										:key="subIndex">
										<view class="sub-collapse-header" @click="toggleSubCollapse(index, subIndex)">
											<text class='text-title'>{{subItem.name}}</text>
											<uni-icons :type="isSubCollapseOpen(index, subIndex) ? 'down' : 'right'"
												size="16" color="#999"></uni-icons>
										</view>
										<view class="sub-collapse-content" v-if="isSubCollapseOpen(index, subIndex)">
											<view class="content-collapse">
												<text class="text">{{subItem.describe}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="PlatformReminder" v-if="jobData.isSignService!==true">
					<view class="title-box">
						<image :src="`${$ImgBaseUrl}findPeopleInfo.png`" mode="" class="findPeopleInfo"></image>
						<text class="title-text">平台提醒</text>
					</view>
					<view class="content">
						此单非平台签约人员服务，谨防线下支付欺诈。如遇乱收费、乱要价、服务不到位请及时拨打平台服务电话，由客服人员介入解决。
					</view>
				</view>

				<view class="title uni-flex" v-if="jobData.isSignService===true">
					<image :src="`${$ImgBaseUrl}detail_label.png`" mode="widthFix" />
					<text>技能证书</text>
					<image :src="`${$ImgBaseUrl}detail_label.png`" mode="widthFix" />
				</view>
				<view class="SkillsCertificate" v-if="jobData.isSignService===true">
					<view class="SkillsCertificate-box">
						<view class="SkillsCertificate-content" v-for="(item,index) in jobData.skillCertResults"
							:key="index" :style="{
				        'align-items': splitImages(item.imgFullUrls).length === 1 ? 'center' : 'flex-start'
				      }">
							<!-- 遍历分割后的图片数组 -->
							<view class="image-container"
								:class="{'single-image': splitImages(item.imgFullUrls).length === 1}">
								<image v-for="(imgUrl, imgIndex) in splitImages(item.imgFullUrls)" :key="imgIndex"
									:src="imgUrl" mode="aspectFill" class='skillCertResults-img' />
							</view>
							<view class="SkillsCertificate-text">
								<text>{{item.remark}}</text>

							</view>
						</view>
					</view>
				</view>

			</view>

			<view class="Other-recommendations">
				<view class="title uni-flex">
					<image :src="`${$ImgBaseUrl}detail_label.png`" mode="widthFix" />
					<text>其他推荐</text>
					<image :src="`${$ImgBaseUrl}detail_label.png`" mode="widthFix" />
				</view>
				<view class="job-item" v-for="(item, index) in displayedRecommendations" :key="index">
					<view class="uni-flex uni-align-center box1">
						<image :src="item.avatar===null||item.avatar===''?`${$ImgBaseUrl}banner.png`:item.avatar"
							class="photo" mode="aspectFill" />
						<view class="uni-flex-column">
							<view class="uni-flex" style="align-items: center;">
								<text class="title">{{item.name}}</text>

								<view class="people-state">
									<view class="real-name">
										<image :src="`${$ImgBaseUrl}findpeople_realname.png`" mode="aspectFill" />
										<text class="text1">{{item.isRealName===true?'已实名':'未实名'}}</text>
									</view>
									<view class="sign-contract">
										<image :src="`${$ImgBaseUrl}findpeople_sign.png`" mode="aspectFill" />
										<text class="text1">{{item.isSignService===true?'已签约':'未签约'}}</text>
									</view>
									<view class="insurance" v-if="item.isSignService">
										<image :src="`${$ImgBaseUrl}insurance-icon.png`" mode="aspectFill" />
										<text class="text1">商业保险</text>
									</view>
								</view>
							</view>
							<view class="info">
								<text class="text1">{{item.sex==="0"?'男':item.sex==="1"?'女':'未知'}} |</text>
								<text class="text1">{{item.age}}岁 |</text>
								<text class="text2">{{item.comEvaluation}}分</text>
							</view>
						</view>
					</view>
					<view class="uni-flex box2">
						<text class="text1">擅长服务: </text>
						<view class="con">
							<view v-for="(item, index) in jobData.goodServices" :key="index" class="project">
								{{ item }}
							</view>
						</view>
					</view>
				</view>
				<view v-if="jobData.otherRecommend && jobData.otherRecommend.length > 3" class="view-more-btn"
					@click="toggleShowMore">
					<text>{{ showMore ? '收起' : '查看更多' }}</text>
					<uni-icons :type="showMore ? 'arrowup' : 'arrowright'" size="16" color="#999999"
						class="more-icon"></uni-icons>
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="btn1" @click="openChat">在线联系</view>
			<view class="btn2" @click="CallDialogShow">联系师傅</view>
		</view>
		<!-- 分享弹窗 -->
		<SharePopup ref="sharePopup" :shareData="shareData" @close="handleShareClose" />
		<CallDialog :showDialog="showCallDialog" :phoneNumber="phoneNumber" @close="showCallDialog = false">
		</CallDialog>
	</view>
</template>

<script setup>
	import {
		computed,
		ref,
		nextTick,
		watch
	} from "vue";
	import {
		ImgBaseUrl
	} from "@/utils/domain.js";
	import CustomNavBar from "@/components/custom-navbar/index.vue";
	import CallDialog from '@/components/CallDialog.vue'
	import {
		queryPeopleDetail,
		PeopleDetailCollect,
		getUserEncryption
	} from '@/api/findPeople.js'
	import {
		onLoad,
		onShareAppMessage
	} from '@dcloudio/uni-app';
	import {
		getAreaid,
		getLatitude,
		getLongitude
	} from "@/common/util.js";
	import SharePopup from '@/components/SharePopup.vue' // 导入分享组件
	const expandedKeys = ref([]);
	const share = ref(null);
	const showCallDialog = ref(false);
	const phoneNumber = ref(''); // 初始默认号码
	const item1 = ["接单快", "质量高", "态度好"];
	// 折叠面板状态管理
	const collapseState = ref({});
	const showMore = ref(false); // 控制是否显示更多
	const jobData = ref('')
	const collectId = ref('')
	const userId = ref('')
	// 分享相关数据
	const sharePopup = ref(null);
	const shareData = ref({
		title: '',
		path: '',
		imageUrl: ''
	});

	onLoad(async (options) => {
		collectId.value = options.jobId
		userId.value = options.jobId
		const params = {
			userId: options.jobId,
			lat: getLatitude(),
			lng: getLongitude(),
		};
		try {
			const res = await queryPeopleDetail(params);
			if (res.code === 200) {
				jobData.value = res.data
			}
		} catch (error) {
			console.error('请求失败:', error);
		}
	});
	// 初始化折叠状态
	const initCollapseState = () => {
		if (jobData.value && jobData.value.serviceItems) {
			jobData.value.serviceItems.forEach((item, index) => {
				collapseState.value[index] = {
					open: true, // 默认展开
					subItems: item.serviceItemsInfo.map((_, subIndex) => ({
						open: true // 子项默认展开
					}))
				};
			});
		}
	};
	// 监听jobData变化初始化状态
	watch(() => jobData.value, () => {
		initCollapseState();
	}, {
		immediate: true,
		deep: true
	});

	// 切换主折叠面板
	const toggleCollapse = (index) => {
		if (!collapseState.value[index]) {
			collapseState.value[index] = {
				open: true
			};
		}
		collapseState.value[index].open = !collapseState.value[index].open;
	};

	// 检查主折叠面板是否打开
	const isCollapseOpen = (index) => {
		return collapseState.value[index]?.open !== false;
	};

	// 切换子折叠面板
	const toggleSubCollapse = (index, subIndex) => {
		if (!collapseState.value[index]?.subItems?.[subIndex]) {
			if (!collapseState.value[index]) {
				collapseState.value[index] = {
					subItems: []
				};
			}
			if (!collapseState.value[index].subItems) {
				collapseState.value[index].subItems = [];
			}
			collapseState.value[index].subItems[subIndex] = {
				open: true
			};
		}
		collapseState.value[index].subItems[subIndex].open = !collapseState.value[index].subItems[subIndex].open;
	};

	// 检查子折叠面板是否打开
	const isSubCollapseOpen = (index, subIndex) => {
		return collapseState.value[index]?.subItems?.[subIndex]?.open !== false;
	};
	// 调整后的联系师傅逻辑，调用接口并控制弹窗
	const CallDialogShow = async () => {
		showCallDialog.value = true
		try {
			const res = await getUserEncryption(userId.value);
			console.log('获取加密号码接口返回', res);
			if (res.code === 200) {
				phoneNumber.value = res.data
			}
			// 假设接口返回的加密号码字段是 encryptionPhone，根据实际接口调整

		} catch (err) {
			console.error('获取加密号码失败', err);

		}
	};
	const displayedRecommendations = computed(() => {
		// 计算需要显示的数据：未展开时最多3条，展开时显示全部
		if (!jobData.value?.otherRecommend) return [];
		return showMore.value ?
			jobData.value.otherRecommend :
			jobData.value.otherRecommend.slice(0, 3);
	});

	// 切换显示更多/收起状态
	const toggleShowMore = () => {
		showMore.value = !showMore.value;
	};

	// const handleCallAction = () => {
	//   uni.makePhoneCall({
	//     phoneNumber: phoneNumber.value.replace(/\s/g, '') 
	//   });
	//   showCallDialog.value = false; 
	// };

	const authentication = computed(() => {
		return jobData.value && jobData.value.authentication ?
			jobData.value.authentication :
			null;
	});

	const realNameStatus = computed(() => {
		if (!authentication.value) return '未知';
		return authentication.value.realName ? '已实名' : '未实名';
	});
	const signStatus = computed(() => {
		if (!authentication.value) return '未知';
		return authentication.value.realName ? '已签约' : '未签约';
	});
	const insuranceStatus = computed(() => {
		if (!authentication.value) return '未知';
		return authentication.value.realName ? '已购买商业保险' : '未购买商业保险';
	});
	const titleWithDefault = computed(() => ({
		...jobData.value.title,
		contact: jobData.value.title?.contact ?? false
	}));

	const handleChange = (keys) => {
		expandedKeys.value = keys;
		console.log('折叠面板变化', keys);
	};

	const splitImages = (imgUrls) => {
		if (!imgUrls) return [];
		return imgUrls.split(',').map(url => url.trim()).filter(url => url);
	};

	// 打开分享弹窗
	const shareToggle = () => {
		// 设置分享数据
		shareData.value = {
			title: jobData.value?.name || '推荐一位优质服务者',
			path: `/pages/tabBars/findPeople/peopleDetail?jobId=${userId.value}`,
			imageUrl: jobData.value?.imgUrl || `${ImgBaseUrl}banner.png`
		};

		sharePopup.value?.open();
	};
	// 分享弹窗关闭回调
	const handleShareClose = () => {
		console.log('分享弹窗已关闭');
	};
	onShareAppMessage(() => {
		return {
			path: `/pages/tabBars/findPeople/peopleDetail?jobId=${userId.value}`, // 注意携带必要参数
			title: jobData.value?.name || '推荐一位优质服务者', // 动态标题（优先使用服务者名称）
			imageUrl: jobData.value?.imgUrl || `${$ImgBaseUrl}banner.png` // 可选：分享卡片图片
		};
	});
	// const shareTo = async (type) => {
	// 	if (type === 'wechat') {
	// 		// 1. 显示分享菜单（可选，部分场景需要手动开启）
	// 		uni.showShareMenu({
	// 			withShareTicket: true,
	// 			menus: ['shareAppMessage'] // 指定分享给好友
	// 		});

	// 		// 2. 主动触发微信好友分享
	// 		try {
	// 			const result = await uni.share({
	// 				provider: 'weixin', // 指定分享平台
	// 				scene: 'WXSceneSession', // 分享到微信好友
	// 				type: 0, // 分享类型：0-图文
	// 				title: jobData.value?.name || '推荐一位优质服务者', // 分享标题
	// 				imageUrl: jobData.value?.imgUrl || `${ImgBaseUrl}banner.png`, // 分享图片
	// 				path: `/pages/tabBars/findPeople/peopleDetail?jobId=${userId.value}`, // 分享路径（携带参数）
	// 			});
	// 			console.log('分享成功', result);
	// 			closeShare(); // 分享后关闭弹窗
	// 		} catch (err) {
	// 			console.error('分享失败', err);
	// 			uni.showToast({
	// 				title: '分享失败',
	// 				icon: 'none'
	// 			});
	// 		}
	// 	}
	// };
	// const closeShare = () => {
	// 	share.value.close(); // 关闭弹窗
	// };
	// // 关闭弹窗按钮
	// const closePopup = () => {
	// 	share.value.close();
	// }
	const collectHandle = async (state) => {
		try {
			const params = {
				collectId: collectId.value,
				collectType: "USER",
				isCollect: !state.contact
			};

			const res = await PeopleDetailCollect(params);
			if (res.code === 200) {
				state.contact = !state.contact;
				if (jobData.value && jobData.value.title) {
					jobData.value.title.contact = state.contact;
				}
				uni.showToast({
					title: state.contact ? '收藏成功' : '已取消收藏',
					icon: 'none'
				});
			} else {
				uni.showToast({
					title: res.msg || '操作失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('收藏操作失败:', error);
			uni.showToast({
				title: res.msg || '操作失败，请重试',
				icon: 'none'
			});
		}
	};

	const bgStyle = computed(() => ({
		backgroundImage: `url(${ImgBaseUrl}detail_bg.png)`,
	}));

	const goReport = ((jobData) => {
		// console.log('jobData',jobData);
		const jobDataStr = encodeURIComponent(JSON.stringify(jobData));
		uni.navigateTo({
			url: `/pages/reportCenter/report?item=${jobDataStr}`,
		});
	})

	const goBack = () => {
		uni.navigateBack({
			delta: 1,
		});
	};

	const openChat = () => {
		const userInfo = JSON.parse(uni.getStorageSync('user_info'))
		let current = ''
		if (userInfo) {
			current = userInfo.id
		}
		if (current != userId.value) {
			uni.navigateTo({
				url: "/pages/chat/detail/index?peerId=" + userId.value + "&userId=" + current +
					"&peerNikeName=" + jobData.value.name,
			});
		} else {
			uni.showToast({
				title: '这是你发布的',
				icon: 'none'
			});
		}

	}
	const handleToast = () => {
			uni.showToast({
				title: '功能开发中',
				icon: 'none'
			});
		}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		background-attachment: fixed;
		overflow: hidden;

		/* 标准语法 */
		.back {
			width: 45rpx;
			height: 45rpx;
			border-radius: 50%;
			background: white;
		}

		.center {
			width: 100%;
			flex: 1;
			// overflow-y: auto;
			box-sizing: border-box;

			.top-container-content {
				width: 100%;
				padding: 0 24rpx 10rpx;
				box-sizing: border-box;

				.top-container {
					margin-bottom: 24rpx;

					.photo-box {
						position: relative;
						margin-left: 43rpx;
						width: 100rpx;

						.photo {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
							object-fit: cover;
						}

						.online {
							position: absolute;
							bottom: 10rpx;
							left: 50%;
							transform: translateX(-50%);
							/* 水平居中 */
							color: white;
							background: #6bc98d;
							border-radius: 17rpx;
							padding: 2rpx 15rpx;
							font-weight: 500;
							font-size: 22rpx;
							white-space: nowrap;
							/* 防止文字换行 */
						}
					}

					.top {
						margin-top: -50rpx;
						background: linear-gradient(194deg,
								rgba(255, 255, 255, 0.6) 0%,
								#ffffff 100%);
						border-radius: 20px 20px 0px 0px;
						padding: 43rpx 34rpx 37rpx;

						.icon-box {
							display: flex;
							justify-content: flex-end;
							/* 将子元素推到右侧 */
							width: 100%;

							.icon {
								background: white;
								border-radius: 50%;
								width: 40rpx;
								height: 40rpx;
								margin-left: 20rpx;
								display: inline-flex;
								align-items: center;
								justify-content: center;

								image {
									width: 25rpx;
									height: 25rpx;
									display: block;
								}
							}
						}

						.line1 {
							.title {
								font-weight: 500;
								font-size: 34rpx;
								color: #333333;
							}

							.text1 {
								font-size: 28rpx;
								color: #666666;
								margin-left: 26rpx;
							}
						}

						.line2 {
							align-items: flex-start;
							/* 顶部对齐 */
							width: 100%;
							margin-top: 20rpx;

							.text1 {
								font-size: 28rpx;
								color: #666666;
								flex-shrink: 0;
								/* 防止标签被压缩 */
							}

							.con {
								flex: 1;
								display: flex;
								flex-wrap: wrap;
								/* 关键属性：允许换行 */
								gap: 10rpx;
								/* 项目间距 */
								margin-left: 20rpx;

								.text2 {
									font-size: 28rpx;
									color: #333333;
								}

								.project {
									color: #2f80ed;
									font-size: 24rpx;
									font-weight: 500;
									background: #e5f0ff;
									padding: 6rpx 10rpx;
									margin-right: 14rpx;
									border-radius: 4rpx;
									white-space: nowrap;
									/* 单行显示 */
								}
							}
						}

						.line3 {
							margin-top: 20rpx;

							.one {
								flex: 1;
								display: flex;
								flex-direction: row;
								align-items: center;
								// justify-content: center;
								position: relative;
								/* 为竖线定位做准备 */
							}

							.two {
								flex: 1;
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: center;
								position: relative;
								/* 为竖线定位做准备 */
							}

							.three {
								flex: 1;
								display: flex;
								flex-direction: row;
								justify-content: flex-end;
								align-items: center;
								// justify-content: center;
								position: relative;
								/* 为竖线定位做准备 */
							}

							/* 左侧和中间的竖线 */
							.one::after,
							.two::after {
								content: "";
								position: absolute;
								right: 0;
								top: 50%;
								transform: translateY(-50%);
								/* 垂直居中 */
								width: 1px;
								height: 30rpx;
								background: #e5e5e5;
							}

							.text1 {
								font-size: 24rpx;
								color: #666666;
								margin-right: 16rpx;
							}

							.text2 {
								font-size: 36rpx;
								color: #2f80ed;
							}
						}

						.line4 {
							height: 88rpx;
							margin-top: 32rpx;
							line-height: 88rpx;
							text-align: center;
							background: #f1f1f1;
							border-radius: 44rpx;
							font-weight: 600;
							font-size: 30rpx;
							color: #333333;
						}
					}

					.tip-con {
						background: #fef6e5;
						border-radius: 0px 0px 20px 20px;
						padding: 10rpx 25rpx;

						image {
							width: 25rpx;
							height: 25rpx;
							margin-right: 8rpx;
						}

						text {
							font-size: 24rpx;
							color: #feb310;
						}
					}
				}
			}


			.demand {
				background: white;
				// border-radius: 20px;
				border-top-left-radius: 30rpx;
				border-top-right-radius: 30rpx;
				padding: 32rpx 20rpx 53rpx;
				margin-bottom: 50rpx;

				.ServiceItemsContent {
					margin-bottom: 25rpx;
					display: flex;
					flex-direction: column;
					overflow: visible;

					// height: 100%;
					.content-top {
						border: 2rpx solid #E2E2E2;
						border-radius: 16rpx;
						padding: 10rpx;
						box-sizing: border-box;
						min-height: auto;
						/* 允许根据内容自动调整高度 */
						overflow: visible !important;

						.custom-collapse {
							border-radius: 16rpx;
							padding: 10rpx;


							.collapse-header {
								padding: 10rpx 0;
								cursor: pointer;

								.ServiceItems-top {
									display: flex;
									justify-content: space-between;
									align-items: center;

									.title-box {
										position: relative;

										.title {
											font-weight: 500;
											font-size: 32rpx;
											color: #333333;
											position: relative;
											z-index: 2;
										}

										.title-bg {
											position: absolute;
											bottom: 0rpx;
											/* 覆盖文字下半部分 */
											left: 0;
											width: 126rpx;
											height: 14rpx;
											background: #FFE3A6;
											border-radius: 7rpx 7rpx 0rpx 0rpx;
											z-index: 1;
										}
									}

									.rate-box {
										width: 400rpx;
										display: flex;
										justify-content: flex-end;

										.rate-text {
											font-weight: 500;
											font-size: 28rpx;
											color: #FEB310;
											margin-right: 20rpx;
										}
									}
								}
							}

							.collapse-content {
								padding-top: 20rpx;
							}

							.sub-collapse {
								margin-bottom: 15rpx;
								border-bottom: 1rpx solid #EBEBEB;

								// 添加这个选择器
								&:last-child {
									border-bottom: none;
									margin-bottom: 0rpx;
								}

								.sub-collapse-header {
									display: flex;
									justify-content: space-between;
									align-items: center;
									padding: 15rpx;
									// background-color: #f9f9f9;
									border-radius: 8rpx;
									font-size: 28rpx;
									color: #333;

									.text-title {
										font-weight: 500;
										font-size: 28rpx;
										color: #333;
									}
								}

								.sub-collapse-content {
									padding: 15rpx;
									background-color: #fff;
									border-radius: 0 0 8rpx 8rpx;
								}
							}
						}
					}
				}

				.SkillsCertificate {
					width: 100%;
					margin-bottom: 25rpx;

					.SkillsCertificate-box {
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.SkillsCertificate-content {
							width: 48%;
							margin-bottom: 20rpx;
							display: flex;
							flex-direction: column;

							// 图片容器
							.image-container {
								width: 100%;
								display: flex;
								flex-direction: column;

								// 单张图片时的特殊样式
								&.single-image {
									align-items: center;
									justify-content: center;
									height: 230rpx; // 与图片高度一致
								}

								.skillCertResults-img {
									width: 300rpx;
									height: 230rpx;
									border-radius: 8rpx;
									background-color: #f5f5f5;

									// 多张图片时的间距
									&:not(:first-child) {
										margin-top: 20rpx;
									}
								}
							}

							.SkillsCertificate-text {
								display: flex;
								flex-direction: column;
								font-size: 28rpx;
								color: #333333;
								align-items: center;
								margin-top: 10rpx;
							}
						}
					}
				}

				.title {
					justify-content: center;
					align-items: center;
					margin-bottom: 30rpx;

					image {
						width: 32rpx;
					}

					text {
						font-weight: 500;
						font-size: 36rpx;
						color: #333333;
						margin: 0 24rpx;
					}
				}

				.evaluate_item {
					margin-top: 29rpx;

					&:not(:last-child) {
						padding-bottom: 30rpx;
						border-bottom: 1px solid #e2e2e2;
					}

					.photo {
						width: 58rpx;
						height: 58rpx;
						border-radius: 50%;
					}

					.line1 {
						margin-left: 10rpx;
						width: 320rpx;
						display: flex;
						justify-content: space-between;

						.name {
							font-size: 28rpx;
							color: #333333;
						}
					}

					.line2 {
						margin-left: 10rpx;
						margin-top: 5rpx;

						.text1 {
							font-size: 24rpx;
							color: #666666;
						}
					}

					.content {
						font-size: 28rpx;
						color: #333333;
					}

					.image-list {
						margin-top: 19rpx;
						display: grid;
						grid-template-columns: repeat(3, 1fr);
						/* 3等分列 */
						gap: 10rpx;

						/* 图片间距 */
						.image-item image {
							width: 100%;
							height: 150rpx;
							/* 固定高度 */
							object-fit: cover;
							/* 关键属性：保持比例填充容器 */
							display: block;
							/* 防止图片下方出现空白 */
							border-radius: 8rpx;
						}
					}
				}

				.PlatformReminder {
					background: #FFEAE5;
					border-radius: 16rpx;
					padding: 20rpx;
					box-sizing: border-box;
					height: 186rpx;
					display: flex;
					flex-direction: column;

					.title-box {
						display: flex;
						align-items: center;
						.title-text {
							color: #FF6A47;
							font-size: 24rpx;
							font-weight: 500;
							margin-left: 10rpx;
						}

						.findPeopleInfo {
							width: 24rpx;
							height: 24rpx;
						}
					}

					.content {
						color: #333333;
						font-size: 24rpx;
						font-weight: 400;
						margin-top: 15rpx;
					}
				}

			}

			// 其他推荐的样式
			.Other-recommendations {
				background: white;
				padding: 32rpx 20rpx 32rpx;
				margin-bottom: 50rpx;

				.view-more-btn {
					// width: 100%;
					height: 50rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 24rpx;
					color: #999;
					font-weight: 500;
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #fff;
					font-weight: 400;
					// border-radius: 16rpx;

					.more-icon {
						margin-left: 10rpx;
					}
				}

				.title {
					justify-content: center;
					align-items: center;
					margin-bottom: 6rpx;

					image {
						width: 32rpx;
					}

					text {
						font-weight: 500;
						font-size: 36rpx;
						color: #333333;
						margin: 0 24rpx;
					}
				}

				.job-item {
					background: #f7f7f7;
					padding: 20rpx 20rpx 20rpx;
					border-radius: 16px;
					margin-top: 24rpx;

					.box1 {
						margin-bottom: 9rpx;

						.photo {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
							margin-right: 20rpx;

						}

						.title {
							font-size: 32rpx;
							font-weight: 500;
							color: #333333;
							margin-right: 8rpx;
						}



						.people-state {
							// width: 100%;
							height: 90rpx;
							display: flex;
							// flex-wrap: wrap;
							align-items: center;

							.real-name {
								background: #ffeae6;
								border-radius: 17px;
								border: 1px solid #ff6a47;
								// padding: 4rpx 18rpx;
								// margin-left: 8rpx;
								width: 116rpx;
								height: 34rpx;
								display: flex;
								align-items: center;
								justify-content: center;

								image {
									width: 20rpx;
									height: 20rpx;
									margin-right: 8rpx;
								}

								.text1 {
									font-weight: 500;
									font-size: 22rpx;
									color: #ff6a47;
								}
							}

							.sign-contract {
								background: #e5f0ff;
								border-radius: 17px;
								border: 1px solid #2f80ed;
								// padding: 4rpx 18rpx;
								margin-left: 8rpx;
								width: 116rpx;
								height: 34rpx;
								display: flex;
								align-items: center;
								justify-content: center;

								image {
									width: 20rpx;
									height: 20rpx;
									margin-right: 8rpx;
								}

								.text1 {
									font-weight: 500;
									font-size: 22rpx;
									color: #2f80ed;
								}

							}

							.insurance {
								background: #e5f0ff;
								border-radius: 17px;
								border: 1px solid #2f80ed;
								// padding: 4rpx 18rpx;
								margin-left: 8rpx;
								width: 144rpx;
								height: 34rpx;
								display: flex;
								align-items: center;
								justify-content: center;

								image {
									width: 20rpx;
									height: 20rpx;
									margin-right: 8rpx;
								}

								.text1 {
									font-weight: 500;
									font-size: 22rpx;
									color: #2f80ed;
								}
							}
						}

						.info {
							margin-top: 12rpx;

							.text1 {
								font-size: 24rpx;
								color: #999999;
								margin-right: 16rpx;
							}

							.text2 {
								font-size: 24rpx;
								color: #2f80ed;
							}
						}
					}

					.box2 {
						align-items: flex-start;
						/* 顶部对齐 */
						width: 100%;
						margin-top: 20rpx;

						.text1 {
							font-size: 28rpx;
							color: #666666;
							flex-shrink: 0;
							/* 防止标签被压缩 */
						}

						.con {
							flex: 1;
							display: flex;
							flex-wrap: wrap;
							/* 关键属性：允许换行 */
							gap: 10rpx;
							/* 项目间距 */
							margin-left: 20rpx;

							.text2 {
								font-size: 28rpx;
								color: #333333;
							}

							.project {
								color: #2f80ed;
								font-size: 24rpx;
								font-weight: 500;
								background: #e5f0ff;
								padding: 6rpx 10rpx;
								margin-right: 14rpx;
								border-radius: 4rpx;
								white-space: nowrap;
								/* 单行显示 */
							}
						}
					}
				}
			}
		}

		.footer {
			// position: fixed;
			/* 固定在底部 */
			// bottom: 0;
			// left: 0;
			width: 100%;
			height: 166rpx;
			/* 高度自适应内容 */
			// min-height: 100rpx;
			/* 保持最小高度 */
			background: #ffffff;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding: 22rpx 24rpx;
			// 添加安全区域距离（关键）
			padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
			/* 兼容旧版 */
			padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
			/* 标准语法 */
			// z-index: 999;

			.btn1 {
				background: #ff6a47;
				border-radius: 44px;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				flex: 2;
				font-weight: 500;
				font-size: 30rpx;
				color: #ffffff;
			}

			.btn2 {
				background: #2f80ed;
				border-radius: 44px;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				margin-left: 24rpx;
				flex: 3;
				font-weight: 500;
				font-size: 30rpx;
				color: #ffffff;
			}
		}
	}

	::v-deep .uni-collapse-item__title-box {
		padding: 0rpx !important;
	}

	::v-deep .uni-collapse-item__title-arrow {
		margin-right: 0rpx !important;
	}

	::v-deep .uni-collapse-item__title-text {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.content-collapse {
		height: 100%;
		padding-bottom: 15rpx;
		box-sizing: border-box;

		.text {
			color: #333333;
			font-weight: 400;
			font-size: 28rpx;
		}
	}

	::v-deep .uni-collapse-item__content {
		overflow: visible !important;
		padding: 0 !important;
		/* 添加以下样式 */
		height: auto !important;
		max-height: none !important;
	}

	::v-deep .uni-collapse {
		width: 100% !important;
		overflow: visible !important;
		/* 添加以下样式 */
		height: auto !important;
	}

	::v-deep .uni-collapse-item__title.uni-collapse-item-border {
		border-bottom: none !important;
	}

	/* 分享弹窗样式 */
	.uni-popup {
		&.uni-popup-bottom {
			/* 调整弹窗高度（根据需求自定义） */
			--uni-popup-bottom-height: 300rpx;
		}
	}

	/* 分享弹窗样式 */
	.custom-share {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 20rpx;
		background: #F3F5F8;

		height: 200rpx;

		.title-box {
			width: 100%;
			display: flex;
			justify-content: center;
			position: relative;
			margin-bottom: 30rpx;

			.share-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
				text-align: center;
			}

			.close-icon {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.share-list {
			display: flex;
			justify-content: center;
			gap: 60rpx;
			// margin-bottom: 40rpx;
		}

		.share-item {
			background: transparent;
			border: none;
			// padding: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			cursor: pointer;

			.weixin {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 10rpx;
			}


		}

		.share-cancel {
			font-size: 28rpx;
			color: #999;
			padding: 20rpx 40rpx;
		}
	}
</style>